<template>
  <div class="my-container" @scroll="handleScroll">
    <div class="my-title-box">
    <div class="my-title" >
      <div class="mytitle-item">
      <div class="avatar">
      <div class="my-headImg">
        <img src="@/assets/img/my_head.png" alt="用户头像" />
      </div>
      </div>
      <div class="info-part">
        <div class="info">
      <ul>
        <li class="my-font-name">张包包</li>
        <li class="my-font-Id">小红书号: 777777777</li>
        <li class="my-font-introduction">心怀梦想，脚踏实地，奋斗如晨星，照亮前行之路，绽放生命的璀璨光芒。</li>
        <li class="my-font-constellation"><div class="my-font-constellation-box"><span>狮子座</span></div></li>
        <li class="my-font-fans"> <span class="count">112</span> <span class="shows">关注</span> <span class="count">7777</span><span class="shows"> 粉丝</span> <span class="count">5324</span><span class="shows">获赞与收藏</span></li>
      </ul>
      </div>
    </div>
    </div>
    </div>
    </div>
    <nav class="my-nav" >
    
      <RouterLink
        v-for="v in myNavlist"
        :key="v.id"
        :to="v.path"
    :class="channel == v ? 'selected' : 'unselected'" 
    @click="channel = v"
      >  
      <div class="nav-item"  >
      <span :class="channel == v ? 'font-weight' : 'unfont-weight'" >{{ v.name }}</span>
     </div>
      </RouterLink>
   
    </nav>

    <div class="my-nav-container" >
      <transition name="slide">
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { RouterLink } from "vue-router";

const myNavlist = ref([
  { id: 1, name: "笔记", path: "/myself/note" },  
  { id: 2, name: "收藏", path: "/myself/collection" },
  { id: 3, name: "点赞", path: "/myself/good" },
]);
const channel = ref(myNavlist.value[0]);
const Scrolled =ref(false);
const handleScroll = () => {
  Scrolled.value = window.scrollY > 0; 
};
</script>

<style scoped>
.font-weight{
  font-weight: 800;
}
.unfont-weight{

}
.fixed {
  /* position:sticky;  
  top: 72px;
  z-index: 10; */
}

.avatar{
  width: calc(16.66667vw - 37.33333px);
  height: calc(11.66667vw - 26.13333px);
  text-align: center;
}

span {
  user-select: none; 
  outline: none;
}

.my-font-name{
  font-size: 24px;
  line-height: 120%;
  width: 100%;
  color: #333333;
  font-weight: 600;
  margin-top: 0px;
}

.my-font-Id{
  font-size: 12px;
  color: #33333399;
  margin-top: 8px;
}

.my-font-introduction{
  font-size: 14px;
  color: #333333;
  margin-top: 16px;
}

.my-font-constellation{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: 50px;
  height: 24px;
  margin: 16px 0 0  ;
  padding: 3px 6px;
  background-color: #00000008;
}
.my-font-constellation-box span{
  font-size: 12px;
  margin: 0 0 0 2px;
  color: #33333399;
}

.my-font-constellation-box div{
  margin-left: 16px;
}

.my-font-fans{
  display: flex;
  font-size: 14px;
  color: #33333399;
  position: relative;
  margin-top: 20px;
}

.my-font-fans .count{
  color: #333333;
  margin-right: 4px;
  font-size: 14px;
  font-weight: 500;
} 

.my-font-fans .shows{
  font-size: 14px;
  margin-right: 16px;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from{
  transform: translateX(100%); 
}
.slide-leave-to{
  transform: translateX(-100%);
}
</style>
